<template>
  <el-card class="box-card">
    <template #header>
      <el-form :inline="true" :model="formInline">
        <el-form-item label="调库类型">
          <el-select v-model="formInline.type" placeholder="请选择调库类型" clearable>
            <el-option :label="item.name" :value="item.value" v-for="item in counter.transferType" :key="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="出库状态">
          <el-select v-model="formInline.outStatus" placeholder="请选择出库状态" clearable>
            <el-option :label="item.name" :value="item.value" v-for="item in counter.outStatus" :key="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="入库状态">
          <el-select v-model="formInline.inStatus" placeholder="请选择入库状态" clearable>
            <el-option :label="item.name" :value="item.value" v-for="item in counter.inStatus" :key="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="add" plain>新增</el-button>
          <el-button @click="init">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
    <el-table :data="tableParams.rows">
      <el-table-column prop="transferSn" label="调拨单号" align="center" width="200">
        <template #default="scope">
          <el-button type="primary" text @click="toLink(scope.row)">{{scope.row.transferSn}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="出库状态">
        <template #default="scope">
          {{counter.idString_format("outStatus",scope.row.outStatus)}}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="入库状态">
        <template #default="scope">
          {{counter.idString_format("inStatus",scope.row.inStatus)}}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="调拨类型">
        <template #default="scope">
          {{counter.idString_format("transferType",scope.row.type)}}
        </template>
      </el-table-column>
      <el-table-column prop="outFactoryName" label="调出工厂" align="center" min-width="150" />
      <el-table-column prop="outStoreName" label="调出仓库" />
      <el-table-column prop="inFactoryName" label="调入工厂" align="center" min-width="150" />
      <el-table-column prop="inStoreName" label="调入仓库" align="center" min-width="150" />
      <el-table-column prop="remark" label="备注" align="center" min-width="250" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="createTime" label="创建时间" width="160" align="center" />
      <el-table-column width="250" label="操作" fixed="right" align="center">
        <template #default="scope">
          <el-button type="primary" text @click="handClick(scope.row,1)">完成</el-button>
          <el-button type="primary" text @click="handClick(scope.row,2)">修改</el-button>
          <el-button type="primary" text @click="handClick(scope.row,3)">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-if="tableParams['total']" :total="tableParams['total']" v-model:page="formInline.pageNum" v-model:limit="formInline.pageSize" @pagination="getInfo" />

    <el-dialog v-model="dialogVisible" title="新增/编辑" width="80%" :before-close="handleClose">
      <el-form :model="form" label-width="120" :rules="rules" ref="formEl">
        <el-form-item label="调拨单号" prop="transferSn">
          <el-input v-model="form.transferSn" placeholder="请输入调拨单号" disabled />
        </el-form-item>
        <el-form-item label="调库类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择调库类型" clearable>
            <el-option :label="item.name" :value="item.value" v-for="item in counter.transferType" :key="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="调出工厂" prop="outFactoryId">
          <selectFactory v-model="form.outFactoryId"></selectFactory>
        </el-form-item>
        <el-form-item label="调出仓库" prop="outStoreId">
          <selectStores v-model="form.outStoreId" :factoryId="form.outFactoryId"></selectStores>
        </el-form-item>
        <el-form-item label="调入工厂" prop="inFactoryId">
          <selectFactory v-model="form.inFactoryId"></selectFactory>
        </el-form-item>
        <el-form-item label="调入仓库" prop="inStoreId">
          <selectStores v-model="form.inStoreId" :factoryId="form.inFactoryId"></selectStores>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" :autosize="{ minRows: 4 }" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm" :loading="loading">
            确 认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="open" title="修改状态" width="600" :before-close="handleClose">
      <el-form :model="query">
        <el-form-item label="修改状态">
          <el-select v-model="query.status" placeholder="请选择状态" clearable>
            <el-option label="已取消" :value="2" />
            <el-option label="已完成" :value="3" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="send">
            确 认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
import useCounterStore from "@/store/counter";
import { onMounted } from "vue";
const counter = useCounterStore();
let formInline = ref({
  pageNum: 1,
  pageSize: 10,
  type: "",
  outStatus: "",
  inStatus: "",
});
let loading = ref(false);
let tableParams = ref({});
let dialogVisible = ref(false);
let form = ref({
  transferSn: "",
  type: "",
  outFactoryId: "",
  outStoreId: "",
  inFactoryId: "",
  inStoreId: "",
  remark: "",
});
let query = ref({
  id: "",
  status: "",
});
let open = ref(false);
let rules = ref({
  transferSn: [
    { required: true, message: "调拨单号不能为空", trigger: "blur" },
  ],
  type: [{ required: true, message: "调拨类型不能为空", trigger: "blur" }],
  outFactoryId: [
    { required: true, message: "调出工厂不能为空", trigger: "blur" },
  ],
  outStoreId: [
    { required: true, message: "调出仓库不能为空", trigger: "blur" },
  ],
  inFactoryId: [
    { required: true, message: "调入工厂不能为空", trigger: "blur" },
  ],
  inStoreId: [{ required: true, message: "调入仓库不能为空", trigger: "blur" }],
});

onMounted(() => {
  search();
});

let search = () => {
  formInline.value.pageNum = 1;
  getInfo();
};
let getInfo = async () => {
  tableParams.value = await proxy.$apis.transferList(formInline.value);
};
let init = () => {
  formInline.value = {
    pageNum: 1,
    pageSize: 10,
    type: "",
    outStatus: "",
    inStatus: "",
  };
  getInfo();
};
let add = () => {
  form.value.transferSn = `DB-${Date.now()}`;
  dialogVisible.value = true;
};
let handleClose = () => {
  form.value = {
    transferSn: "",
    type: "",
    outFactoryId: "",
    outStoreId: "",
    inFactoryId: "",
    inStoreId: "",
    remark: "",
  };
  query.value = {
    id: "",
    status: "",
  };
  proxy.$refs.formEl.resetFields();
  getInfo();
  dialogVisible.value = false;
};
let submitForm = async () => {
  await proxy.$refs.formEl.validate((valid, fields) => {
    if (valid) {
      save();
    } else {
      for (let key in fields) {
        return proxy.$utils.showToast(fields[key][0].message, 0);
      }
    }
  });
};
let save = async () => {
  try {
    loading.value = true;
    //编辑
    if (form.value.id) {
      await proxy.$apis.transferEdit(form.value);
    } else {
      //新增
      await proxy.$apis.transferAdd(form.value);
    }
    proxy.$utils.showToast("操作成功");
    handleClose();
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
let handClick = (row, num) => {
  switch (num) {
    case 1:
      query.value.id = row.id;
      open.value = true;
      break;
    case 2:
      form.value = proxy.$utils.formatFunction(row, { ...form.value });
      form.value.id = row.id;
      dialogVisible.value = true;
      break;
    case 3:
      query.value.id = row.id;
      open.value = true;
      break;
    default:
      break;
  }
};
let send = async () => {
  await proxy.$utils.transferEdit(query.value);
  proxy.$utils.showToast("操作成功");
  handleClose();
};
let toLink = (e) => {
  let url = proxy.$utils.buildUrl("/transfer/transferDetails", {
    id: e.id,
    outFactoryId: e.outFactoryId,
    outStoreId: e.outStoreId,
  });
  proxy.$utils.toLink(url);
};
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;
}
</style>
